<template>
  <MyModal ref="myModal" title="任务记录" :top="25" :width="1500">
    <template #content>
      <a-table style="max-height: 800px; overflow-y: scroll" :columns="columns" :data-source="dataSource"
        :pagination="pagination" :loading="loading" @change="changePage">
        <template #emptyText>
          <a-empty description="暂无数据" />
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'id'">
            <div style="width: 150px">{{ record.id }}</div>
          </template>

          <template v-if="column.key === 'title'">
            <div style="width: 120px">{{ record.title }}</div>
          </template>
          <template v-if="column.key === 'robotId'">
            <div style="width: 140px">{{ record.robotId }}</div>
          </template>
          <template v-if="column.key === 'carryOutState'">
            <a-tag color="red" v-if="record.carryOutState == '-1'">异常</a-tag>
            <a-tag color="red" v-if="record.carryOutState == '0'">未开始</a-tag>
            <a-tag color="green" v-if="record.carryOutState == '1'">已完成</a-tag>
            <a-tag color="blue" v-if="record.carryOutState == '2'">进行中</a-tag>
          </template>
          <template v-if="column.key === 'circulationType'">
            <div style="width: 120px" v-if="record.circulationType == 1">单次循环</div>
            <div style="width: 120px" v-if="record.circulationType == 2">每日循环</div>
          </template>
          <template v-if="column.key === 'taskTime'">
            <div style="width: 140px">{{ timeFormat(record.taskTime) }}</div>
          </template>
          <template v-if="column.key === 'errorMessage'">
            <div style="width: 140px">{{ record.errorMessage }}</div>
          </template>
        </template>
      </a-table>
    </template>
  </MyModal>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import { timeFormat } from '@/hooks/util'
import * as xyApi from '@/api/xy'

const myModal = ref()
const showModal = (item: any) => {
  myModal.value?.showModal()
  searchParams.value.polishId = item.id
  searchParams.value.currentPage = 1
  pagination.value={}
  pagination.value = { page: 1, pageSize: 10, total: 0 }

  getList()
}

const emit = defineEmits<{
  refresh: []
}>()

defineExpose({
  showModal,
})

const dataSource = ref([])
const columns = [
  {
    title: 'ID',
    key: 'id',
    width: 130,
  },
  {
    title: '宝贝名称',
    key: 'title',
    width: 150,
  },
  {
    title: '任务状态',
    key: 'carryOutState',
    width: 90,
  },
  {
    title: '循环方式',
    key: 'circulationType',
    width: 90,
  },
  {
    title: '任务时间',
    key: 'taskTime',
    width: 90,
  },
  {
    title: '异常信息',
    key: 'errorMessage',
    width: 120,
  },
]
interface Pagination {
  page: number
  pageSize: number
  total: number
  current?: number
}
const pagination = ref<Pagination>({ page: 1, pageSize: 10, total: 0 })
let loading = ref<boolean>(false)

interface SearchParams {
  currentPage: number
  pageSize: number
  polishId: number | string
}
const searchParams = ref<SearchParams>({
  currentPage: pagination.value.page,
  pageSize: pagination.value.pageSize,
  polishId: '',
})

// 翻页
const changePage = (e: any) => {
  pagination.value.current = e.current
  pagination.value.pageSize = e.pageSize

  searchParams.value.currentPage = pagination.value.current as number
  getList()
}
// 列表
const getList = async () => {
  loading.value = true
  try {
    let { state, data, message: msg } = await xyApi.automatePolishTaskList(searchParams.value)
    if (state === 200) {
      dataSource.value = data.list
      pagination.value.total = Number(data.totalCount)
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
  loading.value = false
}
</script>
